<template>
	<view class="page-video">
		<view class="video-box">
			<!-- #ifdef MP-WEIXIN -->
			<video :src="video_detail.video.video_url" controls class="video" :poster="video_detail.video.cover_url"></video>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<video :src="video_detail.video.video_url" controls class="video" :poster="video_detail.video.cover_url"
			 x5-playsinline="true"
			  playsinline="true"
			   webkit-playsinline="true" 
			   x-webkit-airplay="true" 
			   x5-video-player-type="h5" 
			   x5-video-player-fullscreen="" 
			   x5-video-orientation="portraint"
			   ></video>
			<!-- #endif -->
			<!-- preload="auto" -->
		<!-- <cover-view class="cover-box" v-if="cover_view_show"> -->
				<!-- <cover-view class="cover-box-tit"> -->
					<!-- <cover-image src="../../static/images/touxiang5.png" class="touxiang"></cover-image>
					<cover-view class="xingming">小番薯_66</cover-view> -->
					<!-- <cover-view class="find-goods" @click="sale_goods">宝贝详情</cover-view> -->
				<!-- </cover-view> -->
				<!-- <cover-view class="cover-box-msg"> -->
					<!-- {{video_detail.video.description}} -->
				<!-- </cover-view> -->
				<!-- <cover-view class="tabs">
					<cover-view class="tab"># {{category_name}}</cover-view>
				</cover-view> -->
			<!-- </cover-view> -->
		</view>
		<view class="cover-box">
			<view class="cover-box-tit" v-if="video_detail.skus.length>0">
				<view class="find-goods" @click="sale_goods">宝贝详情</view>
			</view>
			<view class="cover-box-msg">
				{{video_detail.video.description}}
			</view>
		</view>
		<view style="width: 100%;height: 100upx;"></view>
		<view class="video-bot-box">
			<view class="say" @click="showLong">
				<image src="../../static/images/shuodian2.png" class="shuodian"></image>
				<view>说点什么···</view>
			</view>
			<view class="part-list">
				<view class="part" @click="goPost()">
					<image src="../../static/images/huihui.png"  class="huihui"></image>
					<view class="">回首页</view>
				</view>
				<view class="part" @click="add_prise">
					<image v-if="!has_praise" src="../../static/images/taoxin5.png"  class="taoxin"></image>
					<image v-if="has_praise" src="../../static/images/taoxin9.png"  class="taoxin"></image>
					<view class="">{{praise_times}}</view>
				</view>
				<view class="part" @click="showComment">
					<image  src="../../static/images/taoxin6.png"  class="taoxin"></image>
					<view class="">{{comment_total}}</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="show-msg-box" v-if="isLong" @tap="closeMsgBox" @click="closeMsgBox" @touchmove="closeMsgBox">
			<view class="msg-box-1">
				<textarea  
				:auto-height="true"
				cursor-spacing="40"
				v-on:click.stop="closeMsgBox" 
				v-on:tap.stop="closeMsgBox" 
				v-on:touchmove.stop="closeMsgBox" 
				:focus="isLong" 
				:show-confirm-bar="false" 
				:fixed="true" 
				class="textarea"  
				:placeholder="placeholder_txt" 
				v-model="comments_val"
				maxlength="100">
				</textarea>
				<view class="msg-btn-box">
					<button size="mini" type="default" @click="closeMsgBox" style="margin-right: 20upx;">关闭</button>
					<button size="mini" type="default" @click="getCommentsVal">发表</button>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="show-msg-box" v-if="isLong">
			<view class="cover-view" @click="closeMsgBox"></view>
			<view class="msg-box-1">
				<textarea  
				cursor-spacing="40"
				:focus="isLong" 
				:show-confirm-bar="false" 
				:fixed="true" 
				@blur="blurInput"
				class="textarea"  
				:placeholder="placeholder_txt" 
				v-model="comments_val"
				maxlength="100">
				</textarea>
				<view class="msg-btn-box">
					<button size="mini" type="default" @click="closeMsgBox" style="margin-right: 20upx;">关闭</button>
					<button size="mini" type="default" @click="getCommentsVal">发表</button>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<uni-popup ref="goods_list" type="bottom" :maskClick="false">
				<view class="pop-box">
					<view class="goods_list_tit">
						<view class="">
							商品：{{video_detail.skus.length}}
						</view>
						<image @click="close_goods_list" src="../../static/images/close7.png" class="close_goods"></image>
					</view>
					<scroll-view scroll-y="true" class="scroll_view">
						<view class="goods_part" v-for="(item,key) in video_detail.skus" :key="key">
							<image  @click="goDetail(item.store_sku.id)" :src="item.factory_sku.image[0]" class="goods-img"></image>
							<view class="goods_box">
								<view class="goods_name"  @click="goDetail(item.store_sku.id)">
									{{item.factory_sku.name}}
								</view>
								<view class="goods_box_bot">
									<view class="goods_price"  @click="goDetail(item.store_sku.id)">¥{{item.store_sku.real_price}}</view>
									<view class="go_sale"  @click="payGood(item.store_sku.id)">立即购买</view>
								</view>
								
							</view>
						</view>
						
					</scroll-view>
					
				</view>
		</uni-popup>
		<uni-popup ref="comment_list" type="bottom" :maskClick="false">
			<view class="pop-box" >
				<view class="goods_list_tit">
					<view class="" >
						共{{comment_total}}条评论
					</view>
					<image src="../../static/images/close7.png" class="close_goods" @click="close_comment_box"></image>
				</view>
				<view class="comments_empty" v-if="comments_empty" style="padding-top: 20upx;">暂无评论，快去评论吧~</view>
				<scroll-view scroll-y="true" class="scroll_view_comment" v-if="!comments_empty">
					<view class="comment-list" v-for="(item,key) in comment_list" :key="key">
						<view class="comment-main">
							<view class="comment-tit-1"  @click="setCommentId(item.id,item.user.id,item.user.base_nickname)">
								<image lazy-load="true"  :src="item.user.base_avatar" class="comment-img"></image>
								<view class="comment-txt">
									<view class="comment-txt-tit">{{item.user.base_nickname}}</view>
									<view class="comment-txt-msg">{{item.content}}</view>
									<!-- <view class="comment-txt-editer"><view class="editer-bg">作者赞过</view></view> -->
								</view>
							</view>
						</view>
						<view v-if="item.sub_list>0 && !item.show_comment" @click="show_sub_comment(item.id)" class="more_comment">查看更多回复</view>
						<view class="comment-secend" v-if="item.show_comment">
							<view class="comment-main" v-for="(sub_item,index) in item.sub_list_msg" :key="index" >
								<view class="comment-tit-1">
									<image lazy-load="true"  :src="sub_item.user.base_avatar" class="comment-img"></image>
									<view class="comment-txt" @click="setCommentId(item.id,sub_item.user.id,sub_item.user.base_nickname)">
										<view class="comment-txt-tit">{{sub_item.user.base_nickname}} </view>
										<view class="comment-txt-msg">
											{{sub_item.content}}
											<!-- <text class="comment-txt-time">16分钟前</text> -->
										</view>
									</view>
								</view>
							</view>						
						</view>
						<view v-if="item.show_comment" @click="hide_sub_comment(item.id)" class="more_comment">收起回复</view>
					</view>
				</scroll-view>
				<view class="input_box">
					<input type="text" value="" v-model="second_val" class="input" @blur="blurInput" :placeholder="placeholder" />
					<view class="send" @click="getCommentsVal_2">发送</view>
				</view>
			</view>	
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLong:false,
				placeholder_txt:'请输入评论~',
				comments_val:'',
				placeholder:'评论一下,我顶你上去',
				video_id:0,
				category_name:'',
				video_detail:{},
				cover_view_show:true,
				parent_id:0,
				reply_user_id:0,
				stauts_code:0,
				user_id:0,
				comments_empty:false,
				comment_list:[],
				show_comment_secend:false,
				sub_list:[],
				second_val:'',
				is_prise:false,
				praise_times:0,
				has_praise:false,
				is_send:false,
				comment_total:0
			}
		},
		onLoad(e) {
			var self = this;
			this.video_id = e.id;
			if(e.name){
				this.category_name = e.name;
			}
			this.$request.request({
				url:'/mts/video_browse',
				data:{
					video_id:this.video_id	
				},
				success:function(res){
					
				}
			});
		},
		onShow() {
			var self = this;
			this.get_video_detail();
			self.$request.request({
				url:'/user/info',
				success:function(res){
					self.stauts_code = res.code
					if(res.code==200){
						self.user_id = res.result.id
						
						self.$request.request({
							url:'/mts/video_has_praise',
							data:{
								video_id:self.video_id,
								user_id:self.user_id
							},
							success:function(res){
								console.log(res)
								if(res.code==200){
									if(res.msg=='该用户已点赞！'){
										self.has_praise = true
									}
								}
							}
						});
						
						}
				}
			});
			self.$request.request({
				url:'/mts/video_comment_total',
				data:{
					video_id:self.video_id
				},
				success:function(res){
					console.log(res)
					if(res.code==200){
						self.comment_total = res.result
					}
				}
			});
			this.getComments();
		},
		methods: {
			closeMsgBox(){
				this.isLong = false
			},
			sale_goods(){
				this.$refs.goods_list.open();
				this.cover_view_show = false
			},
			close_goods_list(){
				this.$refs.goods_list.close();
				this.cover_view_show = true
			},
			showComment(){
				this.$refs.comment_list.open();
				this.cover_view_show = false
			},
			close_comment_box(){
				this.$refs.comment_list.close();
				this.cover_view_show = true
			},
				
			get_video_detail(){
				var self = this;
				this.$request.request({
					url:'/mts/video_detail',
					data:{
						video_id:self.video_id	
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							x.skus.forEach((item,index)=>{
								x.skus[index].factory_sku.image = JSON.parse(x.skus[index].factory_sku.image);
								x.skus[index].factory_sku.image[0] =self.$http_img(item.factory_sku.image[0]);
								x.skus[index].store_sku.real_price = self.$money(x.skus[index].store_sku.real_price);
							});
							
							x.video.cover_url = self.$oss_img(x.video.cover_url);
							console.log(x)
							self.praise_times = x.video.praise_times
							self.video_detail = x;
							
							
							// #ifdef H5
							let share_time_line={
								title:self.$request.h5_share_name+'.'+x.video.title, // 分享标题
								link: self.$request.h5_share_url+'?page=video-detail&id='+self.video_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
								
							}
							let share_app_message={
								title:self.$request.h5_share_name+'.'+x.video.title, // 分享标题
								desc: x.video.description, // 分享描述
								link: self.$request.h5_share_url+'?page=video-detail&id='+self.video_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
							}
							uni.setStorageSync('share_time_line',share_time_line);
							uni.setStorageSync('share_app_message',share_app_message);
							self.$request.wx_config()
							// #endif
							
						}else{
							
						}
					}
				});
			},
			payGood(id){
				uni.navigateTo({
				    url: '../shopping-cart/shopping-cart?id='+id+'&num=1'
				});
			},
			goPost(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			video_err(e){
				console.log(e.target.errMsg)
			},
			showLong(){
				var self = this;
				if(this.stauts_code == 40003){
					uni.navigateTo({
						url:'../login/login?page=video-detail&id='+self.video_id+'&name='+self.category_name
					})
				}else{
					this.parent_id = 0;
					this.reply_user_id = 0;
					 this.isLong = true;
					 this.placeholder='请输入你的评论~';
					 this.cover_view_show = false
				}	
			},
			getCommentsVal(){
				var self = this;
				if(this.comments_val==''){
					uni.showToast({
						title:'请输入评论~',
						icon:'none',
						duration:2000
					});
					return false;
				}
				self.$request.request({
					url:'/mts/video_comment',
					data:{
						video_id:self.video_id,
						content:self.comments_val,
						parent_id:self.parent_id,
						reply_user_id:self.reply_user_id,
						user_id:self.user_id
					},
					success:function(res){
						if(res.code==200){
							uni.showToast({
								title:'评论成功~',
								icon:'none',
								duration:2000
							});
							self.comments_val="";
							self.isLong=false;
							self.cover_view_show = true
							self.getComments()
						}else{
							
						}
					}
				});
			},
			getCommentsVal_2(){
				
				var self = this;
				if(this.second_val==''){
					uni.showToast({
						title:'请输入评论~',
						icon:'none',
						duration:2000
					});
					return false;
				}
				if(this.stauts_code == 40003){
					uni.navigateTo({
						url:'../login/login?page=video-detail&id='+self.video_id+'&name='+self.category_name
					})
				}else{
					if(self.is_send) return;
					self.is_send = true;
					self.$request.request({
						url:'/mts/video_comment',
						data:{
							video_id:self.video_id,
							content:self.second_val,
							parent_id:self.parent_id,
							reply_user_id:self.reply_user_id,
							user_id:self.user_id
						},
						success:function(res){
							if(res.code==200){
								uni.showToast({
									title:'评论成功~',
									icon:'none',
									duration:2000
								});
								self.second_val="";
								self.isLong=false;
								// self.cover_view_show = true;
								self.getComments()
								self.is_send = false;
							}else{
								self.is_send = false;
							}
						}
					});
				}
				
			},
			getComments(){
				var self = this;
				self.$request.request({
					url:'/mts/video_comment_list',
					data:{
						video_id:self.video_id,
						p:0,
						per:1000000
					},
					success:function(res){
						if(res.code==200){
							var  y = res.result;
							
							y.forEach((item,index)=>{
								y[index].show_comment = false
							})
							console.log(y)
							if(y.length==0){
								self.comments_empty = true;
							}else{
								self.comment_list = y;
								self.comments_empty = false;
							}
						}else{
							
						}
					}
				});
			},
			show_sub_comment(id){
				var self = this;
				self.$request.request({
					url:'/mts/video_sbu_comment_list',
					data:{
						video_id:self.video_id,
						comment_id:id
					},
					success:function(res){
						if(res.code==200){
							var  y = res.result;
							console.log(y)
							self.sub_list = y;
							self.comment_list.forEach((item,index)=>{
								if(item.id == id){
									self.comment_list[index].show_comment = true;
									self.comment_list[index].sub_list_msg = y;
								}
								
							})
						}else{
							
						}
					}
				});
			},
			hide_sub_comment(id){
				var self = this;
				self.comment_list.forEach((item,index)=>{
					if(item.id == id){
						self.comment_list[index].show_comment = false;
					}
					
				})
			},
			setCommentId(id,userId,name){
				var self = this;
				if(this.stauts_code == 40003){
					uni.navigateTo({
						url:'../login/login?page=video-detail&id='+self.video_id+'&name='+self.category_name
					})
				}else{
					this.parent_id = id;
					this.reply_user_id = userId;
					this.placeholder_txt='回复'+name+':';
					this.isLong = true;
				}
			},
			add_prise(){
				var self = this;
				if (self.is_prise) return;
				if(this.stauts_code == 40003){
					uni.navigateTo({
						url:'../login/login?page=video-detail&id='+self.video_id+'&name='+self.category_name
					})
				}else{
					console.log(
						{
							video_id:self.video_id,
							user_id:self.user_id
						}
					)
					self.$request.request({
						url:'/mts/video_praise',
						data:{
							video_id:self.video_id,
							user_id:self.user_id
						},
						success:function(res){
							console.log(res)
							if(res.code==200){
								uni.showToast({
									title:res.msg,
									icon:'none',
									duration:2000
								});
								if(res.msg == '点赞成功！'){
									// self.is_prise = true;
									self.has_praise = true;
									self.praise_times++
								}
								
							}else{
								
							}
						}
					});
				}
				
			},
			blurInput(){
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
			},
			goDetail(id){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item?id='+id
				});
			}
		}
	}
</script>

<style>
@import url("video-detail.css");
</style>
